<template>
	<div id="popup">
    <div class="popup-container transition-ease-slow" :class="{show: isShow}">
      <div class="title">
        修改密码
        <!--关闭弹框按钮  -->
        <button type="button" class="btn-close transition-ease" @click="closePopup()">
          <span>&times;</span>
        </button> 

      </div>
      <w-form-validate @on-validate="onValid">
        <div class="content">
          <div class="line">
            <div class="name">当前密码</div>
            <div class="pop-input">
              <w-input type="password" v-model="current_password" holder="请输入原始密码" rule="isEmpty|isPassword" error="请输入原始密码|亲，你的原始密码不正确" :maxlength="16"></w-input>
            </div>
          </div>
          <div class="line">
            <div class="name">新密码</div>
            <div class="pop-input">
              <w-input type="password" v-model="new_password" holder="请输入新密码" rule="isEmpty|isPassword" error="请输入新密码|亲，请输入正确的密码格式" :maxlength="16"></w-input>
            </div>
          </div>
          <div class="line">
            <div class="name">再次确认</div>
            <div class="pop-input">
              <w-input type="password" v-model="confirm_password" holder="请再次输入新密码" rule="isEmpty|isPassword" error="请再次输入新密码|亲，请输入正确的密码格式" :maxlength="16"></w-input>
            </div>
          </div>
          <div class="line">
            <w-button type="main" class="sure-btn">确定</w-button>
          </div>
        </div>
      </w-form-validate>
    </div>
  </div>
</template>

<script>
import { apiUpdatePwd } from 'js/api'

export default {
  created() {
    // 组件加载完成后，展示加载动画
    setTimeout(() => {
      // 展示加载动画
      this.isShow = true
    }, 100)

    // 加载背景遮罩层
    $('body').append('<div id="shade"></div>')
  },
  destroyed() {
    // 当组件移除时，去掉遮罩层
    $('#shade').remove()
  },
  data() {
    return {
      isShow: false,
      current_password: '',
      new_password: '',
      confirm_password: ''
    }
  },
  methods: {
    /**
     * 提交修改后的密码，并关闭弹框
     */
    onValid() {
      // 当前accessToken
      const accessToken = this.$store.getters.token
      // 判断两次密码是否一致
      if (this.confirm_password != this.new_password) {
        this.$toast('两次输入密码不一致，请重新输入')
        return
      }
      apiUpdatePwd(accessToken, md5(this.current_password), md5(this.new_password)).then((data) => {
        this.$toast('密码修改成功,请重新登录', () => {
          this.closePopup() // 关闭弹框
          this.$router.push('../../login')
        })
      })
    },

    /**
     * 关闭弹框
     */
    closePopup() {
      // 强制清空数据
      this.current_password = ''
      this.new_password = ''
      this.confirm_password = ''
      // 展示加载动画
      this.isShow = false

      // 让父级销毁此组件
      setTimeout(() => {
        this.$emit('close')
      }, 400)
    }
  }
}
</script>

<style lang="scss">
  #shade {
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    left: 0px;
    position: fixed;
    top: 0px;
    z-index: 10;
  }
  .pop-input {
    .form-control {
      height: 22px;
    }
    .w-input {
      .error-tip {
        margin-top: -19px!important;
      }
    }
  }
</style>

<style lang="scss" scoped>
#popup {
  .popup-container {
    background-color: #FFFFFF;
    width: 366px;
    height: 270px;
    padding: 24px 48px 20px;
    position: absolute;
    top: 0px;
    left: 25%;
    overflow: hidden;
    opacity: 0;
    z-index: 20;

    &.show {
      top: 12%;
      opacity: 1;
    }

    .title {
      color: #444444;
      font-size: 16px;
      padding: 0px 8px 0px;
    }

    .content {
      font-size: 14px;
      margin-top: 48px;

      .line {
        margin-bottom: 20px;

        .name {
          color: #999999;
          display: inline-block;
          width: 56px;
          text-align: right;
          margin-right: 6px;
        }

        .pop-input {
          display: inline-block;
          width: 200px;
          height: 22px;
          padding: 0px 2px;
        }

        .sure-btn {
          background-color: rgb(240, 3, 132);
          color: #FFFFFF;
          display: block;
          font-size: 14px;
          width: 100px;
          height: 30px;
          line-height: 30px;
          margin: 10px auto;
          text-align: center;
        }
      }
    }
  }
}
</style>